@import '../../assets/style/fn.scss';
.ph-pop{
    --ph-ppo-offset:12px;
    --ph-pop-bdc: var(--ph-popover-bg);
    --ph-pop-bg-hover: var(--ph-popover-bg-hover);
    --ph-pop-c: var(--ph-c-d1);
    --ph-pop-c-d1: var(--ph-c-d2);
    --ph-pop-bc:var(--ph-bd-2);
    --ph-pop-shadow:var(--ph-shadow-popover);
    --ph-pop-listh:300px;
    --ph-pop-br:4px;
    position: fixed;
    display: inline-block;
    z-index: var(--ph-zdx-popup);
    background-color: var(--ph-pop-bdc);
    color: var(--ph-pop-c);
    box-shadow: var(--ph-pop-shadow);
    border-radius: var(--ph-pop-br);
    [disabled=true]{
        color: var(--ph-c-disabled)!important;
        cursor: not-allowed!important;
    }
    &:after{
        content: "";
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
        border-color: transparent;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }
    /*------------------------------*/ 
    &.ph-pop-t,
    &.ph-pop-tc,
    &.ph-pop-tl,
    &.ph-pop-tr{
        &:after{
            border-top-color: var(--ph-pop-bdc);
            border-bottom:none;
            top: auto;
            transform: translateY(100%);
        }
    }
    /*------------------------------*/ 
    &.ph-pop-b,
    &.ph-pop-bc,
    &.ph-pop-bl,
    &.ph-pop-br{
        &:after{
            border-bottom-color: var(--ph-pop-bdc);
            border-top:none;
            bottom: auto;
            transform: translateY(-100%);
        }
    }
    /*------------------------------*/ 
    &.ph-pop-l,
    &.ph-pop-lt,
    &.ph-pop-lc,
    &.ph-pop-lb{
        &:after{
            border-left-color: var(--ph-pop-bdc);
            border-right:none;
            left: auto;
            transform: translateX(100%);
        }
    }
    /*------------------------------*/ 
    &.ph-pop-r,
    &.ph-pop-rt,
    &.ph-pop-rc,
    &.ph-pop-rb{
        &:after{
            border-right-color: var(--ph-pop-bdc);
            border-left:none;
            right: auto;
            transform: translateX(-100%);
        }
    }
    
    
    &.ph-pop-bl,
    &.ph-pop-tl{
        &:after{
            left: var(--ph-ppo-offset);
            right: auto;
        }
    }
    &.ph-pop-br,
    &.ph-pop-tr{
        &:after{
            right: var(--ph-ppo-offset);
            left: auto;
        }
    }
    &.ph-pop-lt,
    &.ph-pop-rt{
        &:after{
            top: var(--ph-ppo-offset);
            bottom: auto;
        }
    }
    &.ph-pop-lb,
    &.ph-pop-rb{
        &:after{
            bottom: var(--ph-ppo-offset);
            top: auto;
        }
    }
}